import React from 'react'
import './merchantOrder.css'
import { SearchBar, WhiteSpace, WingBlank, Tabs } from 'antd-mobile'
import OrderStatus from '../OrderStatus/OrderStatus'
import axios from 'axios'
class MerchantOrder extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            orderPending: [],
            orderProcessing: [],
            orderCompleted: [],
            index: 1
        }
    }
    componentDidMount() {
        console.log(this.state.index);
        this.orderRequest(this.state.index, 1)
    }
    shouldComponentUpdate(nextProps, nextState) {
        return true
    }
    orderRequest = (shopId,value) => {
        axios({
            url: 'api3/olife/prder/erchantorder',//不用引入，直接在api后面接接口
            method: 'get',
            data: {
                order_id:value,
                order_status_id: '',
                shop_id: shopId
            }
        }).then(data => {
            // console.log(data.data.data)
            let orderState = data.data.data
            // this.setState({
            //     orderData:orderState
            // })
            for (let i = 0; i < orderState.length; i++) {
                // 待处理
                if (orderState[i].order_status_id === 1) {
                    let a = orderState.filter(item => item.order_status_id === 1)
                    this.setState({
                        orderPending: a
                    })
                    // 处理中
                } else if (orderState[i].order_status_id === 2) {
                    let b = orderState.filter(item => item.order_status_id === 2)
                    this.setState({
                        orderProcessing: b
                    })
                    // 已完成
                } else if (orderState[i].order_status_id === 3) {
                    // console.log(orderState[i].order_status_id);
                    let c = orderState.filter(item => item.order_status_id === 3)
                    this.setState({
                        orderCompleted: c
                    })
                    // console.log(this.state.orderCompleted);
                }
            }
            console.log(this.state.orderPending);
            console.log(this.state.orderProcessing);
            console.log(this.state.orderCompleted);

        }).catch(err => {
            console.log(err)
        })
    }
    render() {

        return (
            <div>
                <div>
                    <WingBlank><h1 className="sub-title">订单</h1></WingBlank>
                    <SearchBar placeholder="请输入订单号进行搜索" ref={ref => this.autoFocusInst = ref}
                        onSubmit={ value=>{this.orderRequest(1,value)}}
                    />
                    <WhiteSpace />
                </div>
                <div>
                    <Tabs tabs={tabs}
                        initialPage={0}
                        ref={(e) => { this._tabs = e }}
                        activeKey={this.state.index}
                        onChange={
                            (key) => {
                                this.setState({ index: key.sub })
                            }
                        }
                    >
                        <div className="tabsBar" key="1" tab="tab1">
                            {this.state.index == 1 && <OrderStatus data={this.state.orderPending} again={this.orderRequest}></OrderStatus>}
                            {this.state.index == 2 && <OrderStatus data={this.state.orderProcessing} again={this.orderRequest}></OrderStatus>}
                            {this.state.index == 3 && <OrderStatus data={this.state.orderCompleted}></OrderStatus>}
                        </div>

                    </Tabs>
                    <WhiteSpace />
                </div>
            </div>
        )
    }
}
const tabs = [
    { title: '待处理', sub: '1' },
    { title: '处理中', sub: '2' },
    { title: '已完成', sub: '3' },
];
export default MerchantOrder